<nz-spin *ngIf="isLoading" class="modal-spin"></nz-spin>
<form nz-form *ngIf="!isLoading" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="customerIds">发放对象</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-select formControlName="customerIds" [nzPlaceHolder]="'发放对象'" style="width: 100%;"  [nzMode]="'multiple'" [nzServerSearch]="true" [nzShowSearch]="true" (nzOnSearch)="onSearch($event)" [nzAllowClear]="true">
        <ng-container *ngFor="let option of fansList">
          <nz-option *ngIf="!loadingOption" [nzValue]="option.id" [nzLabel]="option.name"></nz-option>
        </ng-container>
        <nz-option *ngIf="loadingOption" nzDisabled nzCustomContent>
          <i nz-icon type="loading" class="loading-icon"></i> 搜索中
        </nz-option>
      </nz-select>
      <nz-form-explain *ngIf="validateForm.get('customerIds').dirty && validateForm.get('customerIds').hasError('required')">请输入发放对象</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="amount">金额（￥）</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="200000" [nzStep]="0.05" [nzPlaceHolder]="'金额(元)'" formControlName="amount"  [nzPrecision]="2"></nz-input-number>
      <nz-form-explain *ngIf="validateForm.get('amount').dirty && validateForm.get('amount').hasError('required')">金额（￥）</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="triggerCount">发放次数</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-input-number style="width: 100%;" [nzMin]="1"  [nzStep]="1"  [nzPrecision]="0" [nzPlaceHolder]="'发放次数'" formControlName="triggerCount"></nz-input-number>
      <nz-form-explain *ngIf="validateForm.get('triggerCount').dirty && validateForm.get('triggerCount').hasError('required')">请输入发放次数</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="triggerType">周期类型</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="triggerType">
        <label nz-radio *ngFor="let type of triggerType;" [nzValue]="type.key">{{type.value}}</label>
      </nz-radio-group>
      <nz-form-explain *ngIf="validateForm.get('triggerType').dirty && validateForm.get('triggerType').hasError('required')">请选择周期类型</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item  *ngIf="validateForm.value.triggerType != 3">
    <nz-form-label [nzSpan]="4" nzRequired nzFor="triggerDate">发放日期</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-input-number style="width: 100%;" [nzMin]="1"  [nzStep]="1"  [nzPrecision]="0" [nzPlaceHolder]="'发放日期'" formControlName="triggerDate"></nz-input-number>
      <nz-form-explain *ngIf="validateForm.get('triggerDate').dirty && validateForm.get('triggerDate').hasError('required')">请输入发放日期</nz-form-explain>
      <nz-form-extra  *ngIf="validateForm.value.triggerType == 1" style="color: orange;">温馨提示：发放日期即每月的几号发放，建议您填写1-25号</nz-form-extra>
      <nz-form-extra  *ngIf="validateForm.value.triggerType == 2" style="color: orange;">温馨提示：发放日期即每周几发放，请您填写1-7,分别对应代表周一到周天</nz-form-extra>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="triggerTime">发放时间</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-input-number style="width: 100%;" [nzMin]="0"  [nzMax]="23"  [nzStep]="1"  [nzPrecision]="0" [nzPlaceHolder]="'发放时间'" formControlName="triggerTime"></nz-input-number>
      <nz-form-explain *ngIf="validateForm.get('triggerTime').dirty && validateForm.get('triggerTime').hasError('required')">请输入发放时间</nz-form-explain>
      <nz-form-extra style="color: orange;">温馨提示：发放时间即发放的具体时间可填写0-23点整</nz-form-extra>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="beginTime">开始日期</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-date-picker formControlName="beginTime" [nzPlaceHolder]="'开始日期'" [nzFormat]="'yyyy-MM-dd'"></nz-date-picker>
      <nz-form-explain *ngIf="validateForm.get('beginTime').dirty && validateForm.get('beginTime').hasError('required')">请输入开始日期</nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="remark">备注</nz-form-label>
    <nz-form-control [nzSpan]="20" [nzValidateStatus]="validateForm.controls['remark']">
      <input type="text" nz-input formControlName="remark" placeholder="备注">
      <nz-form-explain *ngIf="validateForm.get('remark').dirty && validateForm.get('remark').hasError('required')">请输入备注</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('remark').dirty && validateForm.get('remark').hasError('maxlength')">不能超过100个字</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <div class="modal-footer">
    <button nz-button type="button" (click)="close()">关闭</button>
    <button nz-button type="submit" [nzType]="'primary'" *ngIf="!triggerId">保存</button>
  </div>
</form>
